<script setup lang="ts">

import {DNS_LINE} from "~/const/Maps";

const route=useRoute();
const form=reactive({
  limit:10,
  page:1,
  domain:route.query.domain as string,
});
const {data:list,refresh}=await useServerGet('/west/gertParseList',form)
definePageMeta({
  layout:'admin',
  title:'dns列表',
});

const deleteDns=async (id:number)=>{
  ElMessageBox.confirm('确定删除该解析域名吗？','提示',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    type:'warning',
    center:true,
  }).then(async ()=>{
    const {code}=await usePost('/west/deleteParse',{id,domain:form.domain})
    if(code==200){
      ElMessage.success('删除成功');
      refresh?.();
    }
  })
}
const action=(type:string,row:any)=>{
  const router=useRouter();
  if(type=='create') return router.push(`/admin/domain/dnsAdd?domain=${form.domain}`)
  router.push(`/admin/domain/dnsAdd?domain=${form.domain}&form=${JSON.stringify(row)}`)
}
</script>

<template>
  <div>
    <el-card class="flex-1">
      <el-button class="my-3" type="primary" @click="action('create')">添加解析</el-button>
      <el-table
        :data="list.data.items"
        style="width: 100%"
        align="center"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="item" label="解析前缀"></el-table-column>
        <el-table-column prop="value" label="解析地址"></el-table-column>
        <el-table-column prop="type" label="解析类型"></el-table-column>
        <el-table-column prop="level" label="级别"></el-table-column>
        <el-table-column prop="ttl" label="ttl"></el-table-column>
        <el-table-column prop="line" label="线路">
          <template #default="{row}">
            {{DNS_LINE[row.line]}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="flex">
              <el-button type="text" size="small" @click="deleteDns(scope.row.id)">删除</el-button>
              <el-button type="text" size="small" @click="action('edit',scope.row)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <MyPage v-model:page="form.page" v-model:perpage="form.limit" v-model:total="list.data.total"></MyPage>
    </el-card>
  </div>

</template>

<style scoped lang="scss">
.border-right{
  &:last-child{
    border-right: none;
  }
  padding-left: 20px;
  border-right: 1px solid var(--el-border-color);
}
</style>